// src/components/WeatherIcon.tsx
import React from 'react';

type IconType = 
  | 'icon-qing'         // 晴
  | 'icon-duoyun'//多云
  | 'icon-yin'//阴
  | 'icon-xiaoyu'        // 雨
  | 'icon-zhongyu'      // 中雨
  | 'icon-dayu' // 大雨
  | 'icon-leizhenyu'    // 雷阵雨

interface WeatherIconProps {
  code: string;
}

const iconMap: Record<string, IconType> = {
  // 和风天气图标代码映射
  '100': 'icon-qing',         // 晴
  '101': 'icon-duoyun',          // 多云
  '104': 'icon-yin',         // 阴
  '305': 'icon-xiaoyu',        // 小雨
  '306': 'icon-zhongyu',       // 中雨
  '307': 'icon-dayu',       // 大雨
  '314': 'icon-leizhenyu', // 雷阵雨
};

export const WeatherIcon: React.FC<WeatherIconProps> = ({ code }) => {
  const iconClass = iconMap[code] || 'icon-default';

  return (
    <i 
      className={`iconfont ${iconClass}`} 
      style={{
        fontSize: '36px',
        color: getIconColor(code)
      }}
    />
  );
};

// 辅助函数设置图标颜色
const getIconColor = (code: string) => {
  const colorMap: Record<string, string> = {
    '100': '#fadb14', // 黄色
    '305': '#1890ff', // 蓝色
    '306': '#0050b3',
    '307': '#003a8c',
    '314': '#ffec3d', // 黄色
  };
  return colorMap[code] || '#666';
};